<script lang="ts" setup>
import {
    getEnterpriseSituationInfo,
    getEnterpriseSituationList,
    getIndustryCtrlChart,
} from '@/api/enterpriseIntelligent'
import { Echart } from '@/components/Echart'
import dayjs from 'dayjs'
import type { EChartsOption } from 'echarts'
import { createSvgBlob } from './utils'

const schema = [
    { label: '排污许可单位', field: 'total', rateField: 'totalrate' },
    { label: '重点管理', field: 'totalkey', rateField: 'totalratekey' },
    { label: '简化管理', field: 'totalsample', rateField: 'totalratesimp' },
    { label: '登记管理', field: 'totaldj', rateField: 'totalRateDj' },
]
const infoData = ref<Record<string, number>>({
    total: 0,
    totalrate: 0,
    totalkey: 0,
    totalratekey: 0,
    totalsample: 0,
    totalratesimp: 0,
    totaldj: 0,
    totalRateDj: 0,
})

const thisYear = dayjs().year()
const yearOptions = Array.from({ length: 10 }).map((_, index) => thisYear - index)
const selectedYear = ref(thisYear)

const chartOptions = ref<any>({})

fetchData()
fetchChartData()

function fetchData() {
    Promise.all([
        getEnterpriseSituationInfo({}),
        getEnterpriseSituationList({
            pageNo: 1,
            pageSize: 1,
        }),
    ]).then(res => {
        infoData.value = {
            ...res[0].data[0],
            total: res[1].totalSize,
        }
    })
}

const insetShadowUrl = URL.createObjectURL(createSvgBlob('#2FFFF1CC', 6))

onUnmounted(() => {
    URL.revokeObjectURL(insetShadowUrl)
})

function fetchChartData() {
    getIndustryCtrlChart({
        year: selectedYear.value,
    }).then(res => {
        const chartData = res.data.slice(0, 6).sort((a: any, b: any) => b.total - a.total)
        const xData = chartData.map((item: any) => item.hyname)
        const yData = chartData.map((item: any) => item.total)

        const barWidth = 16

        const symbolSize = [barWidth, 10]
        const opacity = 1
        chartOptions.value = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(1, 13, 19, 0.8)',
                borderWidth: 0,
                axisPointer: {
                    type: 'shadow',
                },
                textStyle: {
                    color: '#fff',
                },
                confine: true,
            },
            // legend: {
            //     itemWidth: 8,
            //     itemHeight: 8,
            //     itemGap: 20,
            //     right: '2%',
            //     top: '3%',
            //     textStyle: {
            //         fontSize: 14,
            //         color: '#fff',
            //     },
            //     selectedMode: false,
            // },
            grid: {
                top: '20%',
                left: '2%',
                right: '2%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 14,
                    interval: 0,
                    formatter(v: string) {
                        return v.length > 6 ? `${v.slice(0, 6)}...` : v
                    },
                },
                axisLine: {
                    show: false,
                },
            },
            yAxis: {
                name: '单位：家',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 12,
                    align: 'center',
                    padding: [0, 0, 0, 0],
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#B0D7FF40',
                    },
                },
                axisLabel: {
                    color: '#D8F0FF99',
                    fontSize: 13,
                },
            },
            series: [
                {
                    z: 3,
                    stack: '1',
                    tooltip: { show: false },
                    type: 'line',
                    symbolPosition: 'end',
                    data: yData,
                    symbol: 'diamond',
                    symbolSize,
                    itemStyle: {
                        color: '#64FCCAFF',
                        opacity,
                        shadowBlur: 3,
                        shadowColor: '#00C8BBFF',
                    },
                    lineStyle: {
                      opacity: 0,
                    }
                },
                {
                    type: 'bar',
                    name: '企业数量',
                    barWidth: barWidth,
                    data: yData,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 0,
                            y: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: '#2ED4B300' },
                                { offset: 1, color: '#00C8BBFF' },
                            ],
                        },
                        opacity,
                    },
                },
                {
                    data: yData,
                    tooltip: { show: false },
                    type: 'pictorialBar',
                    symbol: 'image://' + insetShadowUrl,
                    barWidth: barWidth,
                },
            ],
        } as EChartsOption
    })
}
</script>
<template>
    <div>
        <div class="flex gap-16px">
            <div
                v-for="item in schema"
                :key="item.field"
                class="bg-#7ccfff14 rounded-4px p-[8px_12px] flex-1"
            >
                <div class="text-18px">{{ item.label }}</div>
                <div class="">
                    <span class="">
                        <span class="text-32px color-#01FF85 fw-600">{{
                            infoData[item.field] || 0
                        }}</span>
                        <span class="text-14px ml-2px">家</span>
                    </span>
                    <span class="bg-#7ccfff14 rounded-4px p-[0_4px] ml-10px">
                        <span class="text-14px">{{ infoData[item.rateField] || 0 }}%</span>
                        <!-- <img class="w-10px ml-4px"  src="@/assets/imgs/enterpriseIntelligent/down.svg" alt="" v-if="infoData[item.rateField] < 0"> -->
                        <img
                            class="w-10px ml-4px"
                            src="@/assets/imgs/enterpriseIntelligent/up.svg"
                            alt=""
                        />
                    </span>
                </div>
            </div>
        </div>
        <div class="bg-#7ccfff14 rounded-4px p-12px mt-20px">
            <div class="flex">
                <div class="flex-1 text-20px font-PangMen">行业管控({{ selectedYear }})</div>
                <ElSelect
                    v-model="selectedYear"
                    class="screen-select w-90px"
                    @click.stop
                    @change="fetchChartData"
                >
                    <ElOption v-for="v in yearOptions" :key="v" :label="v" :value="v" />
                </ElSelect>
            </div>
            <Echart width="100%" height="180px" :options="chartOptions" />
        </div>
    </div>
</template>
